<script setup lang="ts">
const props = withDefaults(defineProps<{
  hasIcon: boolean
  title: string
  content?: string
  showCancelButton?: boolean
  cancelButtonLabel?: string
  confirmButtonLabel?: string
}>(), {
  hasIcon: true,
  showCancelButton: false,
  cancelButtonLabel: '取消',
  confirmButtonLabel: '确定',
})

defineEmits(['confirm'])
</script>

<template>
  <view class="absolute left-1/2 top-1/2 w-690rpx flex flex-col items-center rounded-30rpx from-#DDEBFF to-#FFFFFF bg-gradient-to-b -translate-1/2" @tap.stop>
    <view class="absolute x-center -top-43rpx">
      <slot name="icon" />
    </view>
    <Spacer :height="hasIcon ? '170' : '40'" />
    <view class="text-36rpx font-bold">
      {{ props.title }}
    </view>
    <Spacer height="34" />
    <slot name="content">
      <view class="px-56rpx text-center text-28rpx text-#999999 font-medium leading-40rpx">
        {{ props.content }}
      </view>
    </slot>
    <Spacer height="108" />
    <view v-if="showCancelButton" class="flex items-center">
      <RGButton type="secondary" corner="full" :width="237">
        {{ props.cancelButtonLabel }}
      </RGButton>
      <Spacer width="30" />
      <RGButton type="primary" corner="full" :width="324" @tap="$emit('confirm')">
        {{ props.confirmButtonLabel }}
      </RGButton>
    </view>
    <RGButton v-else type="primary" corner="full" :width="422" @tap="$emit('confirm')">
      {{ props.confirmButtonLabel }}
    </RGButton>
    <Spacer height="75" />
  </view>
</template>
